<template>
	<view class="container">
		<view class="header">
			<svg t="1671629002016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="2685" width="20" height="20">
				<path
					d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z"
					fill="#000" p-id="2686"></path>
				<path
					d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z"
					fill="#000" p-id="2687"></path>
			</svg>
			<svg t="1671629053380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="3709" width="20" height="20">
				<path
					d="M851.2 172.8C664.32-14.08 359.68-14.08 172.16 172.8A477.376 477.376 0 0 0 32 512c0 128 49.92 248.96 140.8 339.2 93.44 93.44 216.32 140.8 339.2 140.8s245.76-46.72 339.2-140.16c90.88-90.88 140.8-211.2 140.8-339.2 0-128.64-49.92-249.6-140.8-339.84z m-90.24 588.16c-136.96 136.96-360.32 136.96-497.92 0A349.44 349.44 0 0 1 160 512c0-94.08 36.48-182.4 103.04-248.96C331.52 194.56 421.76 160 512 160s180.48 34.56 248.96 103.04A349.44 349.44 0 0 1 864 512c0 94.08-36.48 182.4-103.04 248.96z"
					fill="#000" p-id="3710"></path>
				<path
					d="M553.6 444.16l25.6-236.8c0-1.92-0.64-3.84-1.92-5.12-0.64-1.28-1.92-1.92-3.84-1.92h-7.04c-1.92 0-3.84 1.28-5.12 2.56L316.8 565.12c-1.28 1.92-1.28 4.48-0.64 6.4 1.28 1.92 3.2 3.2 5.76 3.2H448l-33.92 241.28c0 1.92 0 3.84 1.28 5.12 1.28 1.28 3.2 1.92 5.12 1.92h4.48c1.92 0 3.84-1.28 5.12-2.56l256.64-366.72c1.28-1.92 1.28-4.48 0.64-6.4a6.72 6.72 0 0 0-5.76-3.2h-128z"
					fill="#000" p-id="3711"></path>
			</svg>
			<svg t="1671629080734" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="4687" width="20" height="20">
				<path
					d="M469.333333 768c-166.4 0-298.666667-132.266667-298.666666-298.666667s132.266667-298.666667 298.666666-298.666666 298.666667 132.266667 298.666667 298.666666-132.266667 298.666667-298.666667 298.666667z m0-85.333333c119.466667 0 213.333333-93.866667 213.333334-213.333334s-93.866667-213.333333-213.333334-213.333333-213.333333 93.866667-213.333333 213.333333 93.866667 213.333333 213.333333 213.333334z m251.733334 0l119.466666 119.466666-59.733333 59.733334-119.466667-119.466667 59.733334-59.733333z"
					fill="#000" p-id="4688"></path>
			</svg>
		</view>
		<scroll-view scroll-x="true" class="scrollView">
			<view class="friend" v-for="item in avatarList">
				<image :src="item.avatar"></image>
				<view>{{item.name}}</view>
			</view>
		</scroll-view>

		<uni-list :border="false">
			<uni-list-chat v-for="item in messageList" :avatar="item.avatar" :avatarCircle="true"  :title="item.name" :note="item.note" badgePositon="right" :badgeText="item.like"></uni-list-chat>
		</uni-list>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	const avatarList = reactive([{
			avatar: '../../static/avatar/1.jpg',
			name: 'fbk'
		},
		{
			avatar: '../../static/avatar/2.jpg',
			name: 'lzs'
		},
		{
			avatar: '../../static/avatar/3.jpg',
			name: 'lhy'
		},
		{
			avatar: '../../static/avatar/4.jpg',
			name: 'hahha'
		},
		{
			avatar: '../../static/avatar/5.jpg',
			name: '奥里给'
		},
		{
			avatar: '../../static/avatar/6.jpg',
			name: '牛波一'
		},
		{
			avatar: '../../static/avatar/7.jpg',
			name: '大外孙'
		},
		{
			avatar: '../../static/avatar/8.jpg',
			name: '我看行'
		}
	])
	const messageList = reactive([
		{
			note: '又是洗澡',
			avatar: '../../static/avatar/5.jpg',
			name: '奥里给',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: '有按摩',
			avatar: '../../static/avatar/6.jpg',
			name: '牛波一',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: '进出口全要钱',
			avatar: '../../static/avatar/7.jpg',
			name: '大外孙',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: "hahhaaa",
			avatar: '../../static/avatar/8.jpg',
			name: '我看行',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: '大外孙你牛波一',
			avatar: '../../static/avatar/1.jpg',
			name: 'fbk',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: '你的消费可不低',
			avatar: '../../static/avatar/2.jpg',
			name: 'lzs',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: '又是拉',
			avatar: '../../static/avatar/3.jpg',
			name: 'lhy',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: '又是吃',
			avatar: '../../static/avatar/4.jpg',
			name: 'hahha',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: '又是洗澡',
			avatar: '../../static/avatar/5.jpg',
			name: '奥里给',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: '有按摩',
			avatar: '../../static/avatar/6.jpg',
			name: '牛波一',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: '进出口全要钱',
			avatar: '../../static/avatar/7.jpg',
			name: '大外孙',
			like: Math.floor(Math.random() * 99)
		},
		{
			note: "hahhaaa",
			avatar: '../../static/avatar/8.jpg',
			name: '我看行',
			like: Math.floor(Math.random() * 99)
		}
	])
</script>

<style scoped lang="scss">
	* {
		padding: 0px;
		margin: 0px;
	}

	.container {
		width: 95%;
		margin: 0 auto;
		height: 100%;
		overflow-y: hidden;
	}

	.header {
		margin: 0 auto;
		width: 95%;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 10000;
		border-bottom: 0.5px solid gray;
	}

	.scrollView {
		margin-top: 20px;
		white-space: nowrap;
		width: 100%;
	}

	.friend {
		display: inline-block;
		height: 70px;
		width: 70px;
		text-align: center;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: center;

		image {
			width: 50px;
			height: 50px;
			border-radius: 50px;
		}
	}
</style>
